import React, { JSX } from 'react';
import { NulCommonOperations, NulDialog, NulFormItem } from '../../components/NulDialog';
import { TextField } from '@mui/material';

interface AnalyzeSingleTextDialogProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (text: string) => void;
};

function AnalyzeSingleTextDialog(props: AnalyzeSingleTextDialogProps): JSX.Element {
  const { open, onClose, onSubmit } = props;

  const [text, setText] = React.useState<string>('');

  const clear = () => {
    setText('');
  };

  const onConfirmClicked = () => {
    clear();
    onClose();
    onSubmit(text);
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='分析新文本'
      operations={
        <NulCommonOperations
          onPositiveClicked={onConfirmClicked}
          onNegativeClicked={() => {
            clear();
            onClose();
          }}
        />
      }
    >
      <NulFormItem hint='文本' component={
        <TextField placeholder='输入要分析的句子' fullWidth size='small'
          value={text}
          onChange={(event) => { setText(event.target.value); }}
        />
      } />
    </NulDialog>
  );
}

export default AnalyzeSingleTextDialog;